<template>
  <view class="order-detail">
    <view class="order-info">
      <view class="info-item">
        <text class="label">订单编号：</text>
        <text class="value">{{ orderInfo.businessOrderId }}</text>
      </view>
      <view class="info-item">
        <text class="label">服务类型：</text>
        <text class="value">{{ orderInfo.serviceTypeName }}</text>
      </view>
      <view class="info-item">
        <text class="label">服务人名：</text>
        <text class="value">{{ orderInfo.servicePersonName }}</text>
      </view>
      <view class="info-item">
        <text class="label">服务地址：</text>
        <text class="value">{{ orderInfo.address }}</text>
      </view>
      <view class="info-item">
        <text class="label">预约时间：</text>
        <text class="value">{{ formatDate(orderInfo.orderTime) }}</text>
      </view>
      <view class="info-item">
        <text class="label">订单状态：</text>
        <text class="value">{{ orderInfo.orderStatus }}</text>
      </view>
      <view class="info-item">
        <text class="label">服务描述：</text>
        <text class="value">{{ orderInfo.remarks }}</text>
      </view>
    </view>

    <view class="action-buttons">
      <nut-button v-if="orderInfo.orderStatus === '待服务'" type="primary" @click="cancelOrder">取消订单</nut-button>
      <nut-button
        v-if="orderInfo.orderStatus === '已完成' && usertype === 'customer'"
        type="primary"
        @click="evaluateOrder"
        >立即评价</nut-button
      >
      <nut-button
        v-if="orderInfo.orderStatus === '已完成' && usertype === 'customer'"
        type="warning"
        @click="complainOrder"
        >我要投诉</nut-button
      >
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getOrderDetail, cancelOrder as cancelOrderApi } from "@/api/customer";

const orderInfo = ref({});
const orderId = ref(null);
const usertype = ref(uni.getStorageSync("usertype"));

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    const res = await getOrderDetail(orderId.value);
    orderInfo.value = res.data;
  } catch (error) {
    console.error("获取订单详情失败:", error);
    uni.showToast({ title: "获取订单详情失败", icon: "none" });
  }
};

// 取消订单
const cancelOrder = async () => {
  uni.showModal({
    title: "确认取消",
    content: "确定要取消该订单吗？",
    success: async (res) => {
      if (res.confirm) {
        try {
          await cancelOrderApi(orderId.value);
          uni.showToast({ title: "取消订单成功", icon: "success" });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } catch (error) {
          console.error("取消订单失败:", error);
          uni.showToast({ title: "取消订单失败", icon: "none" });
        }
      }
    },
  });
};

// 评价订单
const evaluateOrder = () => {
  uni.navigateTo({
    url: `/pages/modules/user/myself/Evaluate/index?orderId=${orderId.value}`,
  });
};

// 投诉订单
const complainOrder = () => {
  uni.navigateTo({
    url: `/pages/modules/user/myself/Complain/index?orderId=${orderId.value}`,
  });
};

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return "";
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  orderId.value = currentPage.options.id;
  fetchOrderDetail();
});
</script>

<style scoped>
.order-detail {
  padding: 20px;
  background-color: #fff;
}

.order-info {
  margin-bottom: 20px;
}

.info-item {
  display: flex;
  margin-bottom: 15px;
  line-height: 1.5;
}

.label {
  width: 80px;
  color: #666;
}

.value {
  flex: 1;
  color: #333;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
</style>
